/*
 * 故障统计模块
 * @Author: Chenliang(930225)
 * @Date: 2019-10-12 14:22:20
 * @LastEditors: Chenliang(930225)
 * @LastEditTime: 2019-10-15 10:27:23
 */

import React, { Component } from 'react';
import { connect } from 'dva';
import style from './index.scss';
import echarts from 'echarts';
import { Tabs, Select } from 'antd';
const { TabPane } = Tabs;//ant 标签切换
const { Option } = Select;//ant 下拉框
/**
 * @description: connect state数据
 * @param {type} 
 */
@connect(({ statistics, loading }) => ({
  statistics,
  loading
}))

class Statistics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 设置echart参数
      option: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          top: '2%',
          left: '0%',
          right: '2%',
          bottom: '0%',
          containLabel: true,
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#24b8e7',
                  },
                  {
                    offset: 1,
                    color: '#1270db',
                  },
                ]),
              },
            },
            lineStyle: {
              color: '#00b5ff',
              width: 1,
            },
            itemStyle: {
              color: 'rgb(255, 70, 131)',
              opacity: 0,
            },
          },
        ],
      },
    };
  }
  /**
   * @description: 初始化echart插件
   * @param {type} 
   */
  initsChart = () => {
    const { option } = this.state;
    const myChart = echarts.init(document.getElementById('chartMain'));
    myChart.setOption(option);
    window.addEventListener("resize", () => { myChart.resize(); });
  };
  /**
   * @description: 点击年份获取数据
   * @param {type} 
   */
  handleChange = value => {
    this.getDeatil(value);
  };

  /**
   * @description: 获取数据通用方法
   * @param {type} 
   */
  getDeatil(year) {
    const { dispatch } = this.props;
    dispatch({
      type: 'statistics/getStatistics',
      payload: { year: year }
    }).then(resp => {
      const statisData = this.props.statistics.statistics;
      this.setState({
        option: {
          series: [
            {
              data: statisData,
            },
          ],
        },
      });
    });
    this.initsChart();
  }
  /**
   * @description: 组件渲染后调用获取数据通用方法
   * @param {type} 
   */
  componentDidMount() {
    this.getDeatil('');
  }
  render() {
    return (
      <div className="task-detail-box">
        <Tabs defaultActiveKey="1" onChange={this.callback}>
          <TabPane tab="故障统计" key="1">
            <Select style={{ width: 300 }} onChange={this.handleChange} placeholder="年份">
              <Option value="2019">2019</Option>
              <Option value="2018">2018</Option>
            </Select>
            <div id="chartMain" className={style.chart}></div>
          </TabPane>
          <TabPane tab="故障分布" key="2">
            故障分布
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default Statistics;
